<template>
  <div>
    <div class="filter-form" >
      <el-row>
        <el-col :span="22">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="区域">
              <city-area ref="cityArea" :cityAreaValue.sync="form.area" />
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="form.type" placeholder="类型" class="width-120" >
                <el-option v-for="item in parking_type" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="禁启用">
              <el-select v-model="form.status" placeholder="请选择" class="width-120" >
                <el-option v-for="item in parking_status" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关键字">
              <el-select v-model="search_key" placeholder="请选择" class="width-120">
                <el-option label="停车场名称" value="parkingName"></el-option>
                <el-option label="详细区域" value="address"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="keyword"  placeholder="请输入关键字按Enter搜索"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <div>
            <router-link to="/parkingAdd">
              <el-button type="primary" class="pull-right" >新增停车场</el-button>
            </router-link>
          </div>
        </el-col>
      </el-row>
    </div>
     <el-table :data="tableData" border stripe style="width: 100%" v-loading="table_loading" >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="parkingName" label="停车场名称"></el-table-column>
      <el-table-column prop="type" label="类型">
        <template slot-scope="scoped" >
          <span>{{getType(scoped.row.type)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="区域"></el-table-column>
      <el-table-column prop="carsNumber" label="可停放车辆"></el-table-column>
      <el-table-column prop="status" label="禁启用">
        <template slot-scope="scope" >
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="area" label="查看位置">
        <template slot-scope="scope" >
          <el-button size="mini" type="success" @click="showLocation(scope.row)">查看地图</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="small" @click="onDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="padding-top-30" >
      <el-col :span="4"><div style="padding: 5px"></div></el-col>
      <el-col :span="20">
        <el-pagination
          class="pull-right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <MapLocation :flagVisible.sync="flagVisible" :parking_data="parking_data" />
  </div>
</template>

<script>
import { ParkingList, ParkingDelete } from "@/api/parking.js"
import CityArea from "@/components/common/cityArea"
import MapLocation from "@/components/dialog/showMapLocation"


export default {
  name: "Parking",
  components: {
    CityArea,
    MapLocation
  },
  data() {
    return {
      table_loading: false,
      parking_data: {},
      flagVisible: false,
      parking_status: this.$store.state.config.parking_status,
      parking_type: this.$store.state.config.parking_type,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      pageNumber: 1,
      value: "",
      form: {
        area: "",
        type: "",
        status: "",
      },
      search_key: "",
      keyword: "",
      options: [],
      tableData: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    onDelete(id) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ParkingDelete({id})
          .then((res) => {
            this.$message({
              type: 'success',
              message: res.message
            });
            this.getData()
          }) 
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    getType(value) {
      const data = this.parking_type.filter(item => item.value == value)
      if(data && data.length > 0) {
        return data[0].label
      }
    },
    showLocation(row) {
      this.flagVisible = true
      this.parking_data = row
    },
    search() {
      this.getData()
    },
    edit(id) {
      this.$router.push({
        name: "ParkingAdd",
        query: {id}
      })
    },
    getData() {
      const data = {
        pageSize: this.pageSize,
        pageNumber: this.pageNumber
      }
      const filterData = JSON.parse(JSON.stringify(this.form))
      for(let key in filterData) {
        if(filterData[key]) {
          data[key] = filterData[key]
        }
      }
      if(this.keyword && this.search_key) {
        data[this.search_key] = this.keyword
      }
      this.table_loading = true
      ParkingList(data)
        .then((res) => {
          this.tableData = res.data.data
          this.total = res.data.total
          this.table_loading = false
        })
        .catch((e) => {
          this.table_loading = false
        })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.pageNumber = val
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>